<template>
	<view class="content">
		<div class="icon">
		<image class="logo" src="/static/02.jpg"></image>
		<div class="icons">
			<div class="icons__item"><img src="/static/super.png" alt="" class="icons__item_img"><p class="icons__item_p">超市</p></div>
			<div class="icons__item"><img src="/static/market.png" alt="" class="icons__item_img"><p class="icons__item_p">菜市场</p></div>
			<div class="icons__item"><img src="/static/fruits.png" alt="" class="icons__item_img"><p class="icons__item_p">水果店</p></div>
			<div class="icons__item"><img src="/static/flower.png" alt="" class="icons__item_img"><p class="icons__item_p">鲜花绿植</p></div>
			<div class="icons__item"><img src="/static/drug.png" alt="" class="icons__item_img"><p class="icons__item_p">医药健康</p></div>
			<div class="icons__item"><img src="/static/home.png" alt="" class="icons__item_img"><p class="icons__item_p">家具时尚</p></div>
			<div class="icons__item"><img src="/static/cake.png" alt="" class="icons__item_img"><p class="icons__item_p">烘焙蛋糕</p></div>
			<div class="icons__item"><img src="/static/sign.png" alt="" class="icons__item_img"><p class="icons__item_p">签到</p></div>
			<div class="icons__item"><img src="/static/prestige.png" alt="" class="icons__item_img"><p class="icons__item_p">大牌免运</p></div>
			<div class="icons__item"><img src="/static/red.png" alt="" class="icons__item_img"><p class="icons__item_p">红包套餐</p></div>
		</div>
		</div>
		<div class="icon">
     <h3 class="nearby-title">
		附近店铺
		<a href="">查看更多</a>
	 </h3>
	 <a href="" >
		<div class="shop">
         <img src="/static/near.png" alt="" class="image2">	
		 	<div class="shop">
				<div class="shop2">沃尔玛</div>
				<div class="shop3">
                <span>月售：10000</span>
				<span>起送：0</span>
				<span>基础运费：5</span>
				</div>
				<p>VIP尊享满89元减4元运费券</p>
			</div>
		</div>
	 </a>
	 </div>
		<view>
			<text class="title"></text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: skyblue;
	}
	.icon{
		width: 500px;
		height: 500px;
        background-color: rgb(248, 249, 250); 
	}

	.logo {
		height: 400rpx;
		width: 1000rpx;
		margin: 200rpx auto 50rpx auto;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.icons{
		display: flex;
    flex-wrap: wrap;
    margin-top: .16rem;
	}
	.icons__item{
		width: 20%;
	}
	div{
		display: block;
    unicode-bidi: isolate;
	}
	.icons__item_img{
		display: block;
      width: 50px;
      height:50px;
      margin: 0 auto;
	}
	.icons__item_p{
		margin: .06rem 0 .16rem 0;
    text-align: center;
    color: #333;
	}
	img{
		border-style: none;
	}
	.nearby-title{
		color: #333;
    font-size: 14px;
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    border-bottom: .01rem solid #f1f1f1;
    padding: .15rem 0;
    margin: 0;
	}
	.shop{
		display: flex;
    padding-top: .12rem;
    border-bottom: .01rem solid #f1f1f1;
	}
	.image2{
		margin-right: 40px;
    width: 100px;
    height: 100px;
       
	}
	a {
            text-decoration: none;
            color: inherit;
        }

        /* 店铺容器样式 */
        .shop {
            display: flex;
            align-items: center;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 16px;
            margin: 16px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.3s ease;
        }

        /* 鼠标悬停时增加阴影效果 */
        .shop:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        /* 图片样式 */
        .image2 {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 4px;
            margin-right: 16px;
        }

        /* 店铺信息容器样式 */
        .shop-info {
            flex: 1;
        }

        /* 店铺名称样式 */
        .shop2 {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 8px;
        }

        /* 店铺统计信息样式 */
        .shop3 {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 8px;
        }

        /* 店铺统计信息项样式 */
        .shop3 span {
            margin-right: 16px;
            color: #666;
        }

        /* 优惠券信息样式 */
        p {
            color: #f60;
            margin: 0;
        }
</style>
